/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {Renderer} from '../../renderer';
import * as cx from 'classnames';
const defaultImage = __uri('./placeholder.png');

@Renderer({
  name: 'field-image',
  desc: '...',
  test: /(?:^|\/)field\/(?:image|pic|picture)$/
})
export default class PlainField extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    type: PropTypes.string.isRequired
  };

  static defaultProps = {
    imageWrapClassName: 'thumb-md',
    imageClassName: 'img-rounded w-full inline',
    multiple: false
  };

  render() {
    const {
      className,
      value,
      multiple,
      imageClassName,
      imageWrapClassName
    } = this.props;

    let images = [];

    if (multiple &&  typeof value === 'string') {
      images = value.split(',');
    } else if (Array.isArray(value)) {
      images = value.concat();
    } else {
      images.push(value || defaultImage);
    }

    return (
      <div className={className}>
        {images.map((src, key) => (
          <div key={key} className={imageWrapClassName}>
            <img className={imageClassName} src={src} />
          </div>
        ))}
      </div>
    );
  }
}
